<template>
  <div>
    <!-- 页脚开始 -->
    <div class="footer">
      <div class="reed">
        <div class="youqing">
          <p>友情链接 :</p>
          <span class="hand" v-for="(item, index) in newsWeblink" :key="index+item" @click="gobaidu(item.url)">{{item.name}}</span>
        </div>
      </div>
      <div class="lianjie">
        <div class="fooot">
        <div class="kuaijie">
          <div class="over">
            <div>
              <h2>联系我们</h2>
              <p>服务热线：{{configData.hotile}} {{configData.mobile}}</p>
              <p>QQ：{{configData.mail}}</p>
              <p>地址：{{configData.city}}</p>
            </div>
            <div class="saoma">
              <img :src="configData.qrcode" />
              <p class="guanzhu">扫码关注我们</p>
            </div>
          </div>
          <div class="daohangkuai">
            <h2>快捷导航</h2>
            <div class="zuo">
              <ul>
                <li><router-link to="/">首页</router-link></li>
                <li><router-link to="/page/details?num=0">消防水泵</router-link></li>
                <li><router-link to="/page/details?num=1">水泵控制柜</router-link></li>
                <li><router-link to="/page/details?num=2">气体灭火</router-link></li>
                <li><router-link to="/page/details?num=3">火灾报警</router-link></li>
              </ul>
            </div>
            <div class="you">
              <ul>
                <li><router-link to="/page/details">产品中心</router-link></li>
                <li><router-link to="/page/news">新闻动态</router-link></li>
                <li><router-link to="/page/about">关于我们</router-link></li>
                <li><router-link to="/page/witness">客户见证</router-link></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="liuyan">
          <h2>在线留言</h2>
          <input class="liuyank" placeholder="姓名" v-model="message.name" />
          <input class="liuyanku" placeholder="电话" v-model="message.mobile" />
          <textarea
            class="liuyankua"
            style="resize: none"
            placeholder="留言"
            v-model="message.demand"
          ></textarea>
          <button class="tijiao" @click="sendMess">立即提交</button>
        </div>
        </div>
      </div>

      <div class="tongji">
        <div class="ovver">
        <p>
          <!-- Copyright 1999-2019 www.wld119.net All Rights Reserved.
          陕西万力达消防设备有限公司 站长统计 陕 ICP 备 123456789 -->
          {{configData.copyright + '  ' + configData.record_number}}
        </p>
        </div>
      </div>
    </div>
    <!-- 页脚结束 -->
  </div>
</template>

<script>
export default {
  name: "footer",
  components: {},
  // props: {
  // visible: Boolean
  // },
  data() {
    return {
      newsWeblink:[],
      message: {
        name: '',
        mobile: '',
        emil: '',
        company: '',
        demand: ''
      },
      configData: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getWeblink();
    this.getConfig();
  },
  methods: {
    sendMess () { // 用户留言
      var _this = this;
      _this.$ajax
        .post("http://apihttp://api.wld119.com/api/v1/Leaving/add", this.message)
        .then((res) => {
          console.log("用户留言", res.data.result);
        })
        .catch((error) => {
          console.log(error);
        });
    },
     getWeblink() {//外链
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config/weblink")
        .then((res) => {
          console.log("外链", res.data.result);
          this.newsWeblink = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    gobaidu(url){
      // window.location.href = 'www.baidu.com'
      window.open('http://' + url)
    }
  },
};
</script>

<style scoped>
/* /* 页脚开始 */
.footer {
  width: 100%;
  height: 500px;
  margin-top: 30px;
} 
.reed{
  width: 100%;
  min-width: 1200px;
  background :#0061ae;
}
.youqing {
  width: 100%;
  min-width: 1200px;
  height: 50px;
  background :#0061ae;
  margin-top: 2em;
}
.youqing {
  width: 1200px;
  margin: 0 auto;
}
.youqing p {
  float: left;
  font-size: 19px;
  color: #fff;
  margin-top: 10px;
  overflow: hidden;
}
.youqing span {
  float: left;
  color: #fff;
  margin-top: 12px;
  margin-left: 2em;
  overflow: hidden;
}

.lianjie {
  width: 100%;
  min-width: 1200px;
  height: 400px;
  background: #0061ae;
  margin-top: 1px;
}
.fooot{
  width: 1200px;
  margin: 0 auto;
  
}
.kuaijie {
  width: 850px;
  height: 400px;
  float: left;
  overflow: hidden;
}
.over {
  width: 550px;
  height: 200px;
  float: left;
}
.over h2 {
  font-size: 20px;
  color: #fff;
  font-family: Serif;
  margin-top: 2em;
}
.over p {
  margin-top: 1em;
  padding: 2px;
  color: #fff;
}
.saoma {
  margin-top: 2em;
}
.saoma img{
  width: 120px;
}
.saoma p {
  margin: 3px;
}
.daohangkuai {
  float: left;
  width: 250px;
  height: 50px;
  margin-top: 2em;
  font-size: 15px;
  color: #fff;
 
}
.daohangkuai h2 {
  font-size: 20px;
  color: #fff;
  font-family: Serif;
  margin-top: 15px;
  margin-left: 3px;
}
.daohangkuai {
  font-size: 15px;
  color: #fff;
}
a{
  color: #fff;
}
.zuo {
  margin-top: 20px;
  float: left;
  overflow: hidden;
}
.zuo ul li {
  padding: 5px;
  color: #fff;
}
.you {
  margin-top: 20px;
  margin-right: 4em;
  float: right;
  overflow: hidden;
}
.you ul li {
  padding: 5px;
  color: #fff;
}
.liuyan {
  width: 350px;
  height: 400px;
  overflow: hidden;
}
.liuyan h2 {
  font-size: 20px;
  color: #fff;
  font-family: Serif;
  margin-top: 2em;

}
.liuyank {
  margin-top: 1em;
  height: 35px;
  background: #0061ae;
  border: 0 solid #fff;
  width: 340px;
  height: 40px;
  border: 1px solid #fff;
}
.liuyanku {
  margin-top: 1em;
  height: 35px;
  background: #0061ae;
  border: 0 solid #fff;
  width: 340px;
  height: 40px;
  border: 1px solid#fff;
}
.liuyankua {
  margin-top: 1em;
  height: 50px;
  background: #0061ae;
  border: solid #fff;
  width: 340px;
  height: 70px;
  border: 1px solid #fff;
}
.tijiao {
  font-size: 26px;
  color: #fff;
  padding: 5px 40px;
  background: #d6af62;
  border: 0;
  margin-top: 1em;
  width: 340px;
  height: 50px;
  border: 1px solid #0061ae;
}
.tongji {
  width: 100%;
  min-width: 1200px;
  height: 50px;
  background: #666;
}
.ovver{
  width: 1200px;
  margin: 0 auto;
}
.tongji p {
  font-size: 10px;
  color: #fff;
  text-align: center;
  padding: 15px;
  font-variant: small-caps;
}
</style>
